<template>
    <div class="body-wrap">
        <!-- <span >{{ selectData }}</span> -->
        <div class="title-top-box">
            <img src="../../assets/images/taskadd/icn.png" @click="clickOut" />
            <h2>选择执行人</h2>
        </div>
        <div class="tab-box">
            <van-tabs v-model:active="active" @click-tab="onClickTab" style="background-color: #F4F9FD;">
                <van-tab title="执行人">
                    <div class="e-s-item">
                        <van-search v-model="executorValue" placeholder="请输入搜索关键词" />
                    </div>
                    <div class="table-item">
                        <van-checkbox-group label-disabled v-model="checkExe" @click="clickExe">
                            <van-cell-group>
                                <van-cell size="large" v-for="(item, index) in selectData" clickable :key="index"
                                    :title="item.empName" icon="friends-o">
                                    <span style="text-align: center;">{{ item.postName }}</span>
                                    <template #right-icon>
                                        <van-checkbox :disabled="item.disabled" :name="item.empId"
                                            :ref="el => checkExeRefs[index] = el" @click.stop />
                                    </template>
                                </van-cell>
                            </van-cell-group>
                        </van-checkbox-group>
                    </div>
                </van-tab>
                <van-tab title="群组">
                    <div class="g-s-item">
                        <van-search v-model="groupValue" placeholder="请输入搜索关键词2" />
                    </div>
                    <div class="table-item">
                        <van-checkbox-group v-model="checkGroup" ref='checkExeRefs'>
                            <van-cell-group>
                                <van-cell size="large" v-for="(item, index) in selectGroupData" clickable :key="item"
                                    :title="item.name" icon="friends-o">
                                    <!-- <span style="text-align: center;">{{ item.name }}</span> -->
                                    <template #right-icon>
                                        <van-checkbox :name="item" :ref="el => checkGopRefs[index] = el" @click.stop />
                                    </template>
                                </van-cell>
                            </van-cell-group>
                        </van-checkbox-group>
                    </div>

                </van-tab>
            </van-tabs>
        </div>
        <div class="btn-box">
            <van-button type="primary" color="#3F8CFF" @click="submit">创建任务</van-button>
        </div>
        <div class="bg-box" v-if="false">
            <van-empty :image="bg2" :image-size="[90, 120]" description="请输入关键词检索执行人" />
        </div>
    </div>
</template>

<script setup="selectPeople">

import { onMounted, reactive, computed, watch } from 'vue';
import bg2 from '../../assets/images/taskdetail/bg2.png'
import { useRouter, useRoute } from "vue-router";
import { getListGroup, getGroup } from '../../api/index'
import { executorWithOut } from '../../store/modules/excutor'
// import {  }

let router = useRouter()

const userStore = executorWithOut();
// const userExecutor = computed(() => {
//   return userStore.getUserExecutor
// })
const { taskData, fileData, executor } = storeToRefs(userStore)
let executorValue = ref('')
let groupValue = ref()



//tab
const active = ref(0);
const onClickTab = ({ title }) => {
    if (title != '执行人') {
        groupValue.value = null
    } else {
        executorValue.value = null
    }
}

//table列表(执行人)
const checkExe = ref([

]);
const checkExeRefs = ref([]);
let option = ref()

// const clickExe = (index) => {
//     console.log(checkExe.value[index], checkExeRefs.value, '12333333333333');
//     checkExeRefs.value[index].toggle();
// };

//点击退出
const clickOut = () => {
    router.push({
        name: 'taskAdd'
    })
}

//table列表(群组)
const checkGroup = ref([]);
const checkGopRefs = ref([]);
let options = ref()

//选择群组数据
// const clickGroup = (index) => {
//     checkGopRefs.value[index].toggle();
//     console.log(checkGroup.value, checkGopRefs.value); 
// };
//监听群组选择
watch(checkGroup, (newValue, oldValue) => {
    // 回调函数形式
    if (newValue.length > oldValue.length) {
        checkGroup.value.forEach(element => {
            element.groupPerson.forEach(item => {
                option.value.forEach(val => {
                    if (val.empId == item.empId) {
                        // val.disabled = true
                        checkExe.value.push(val.empId)
                        console.log( checkExe.value,111111)
                    }
                })
            })
        })
    } else {
        // checkExe.value = []
        checkGroup.value.forEach(element => {
            element.groupPerson.forEach(item => {
                option.value.forEach(val => {
                    if (val.emIid == item.empId) {
                        val.disabled = true
                        checkExe.value.push(val)
                    }
                })
                // checkExe.value.forEach(val =>{
                //     // item.indexOf(val.id)
                //     console.log(item.indexOf(val.id),'item.indexOf(val.id)')
                // })

            })
        })
    }
})

// watch(checkExe, (newValue, oldValue) => {

// })


//获取执行人
const getExecutor = () => {
    if (taskData.value.executors) {
        checkExe.value = taskData.value.executors.map(item => {
            return item.empId
        })
        // checkExe.value = taskData.value.executors
    }
    getListGroup().then(({ data }) => {
        // option.value = res.data.data[0].children
        option.value = data.data
        option.value.forEach(item => {
            item.empId = item.id
            item.empName = item.fullName
        })

    })
}
//获取群组
const getGroupPeople = () => {
    getGroup().then(res => {
        options.value = res.data.data
    })
}

//搜索数据
const selectData = computed(() => {
    if (option.value) {
        return option.value.filter((p) => {
            return p.empName.indexOf(executorValue.value) !== -1
        })
    }
})
//搜素群组
const selectGroupData = computed(() => {
    if (options.value) {
        return options.value.filter((p) => {
            return p.name.indexOf(groupValue.value) !== -1
        })
    }
})
//确认
const submit = () => {
    // console.log(checkExe.value, 'checkExe.value[0]');
    const data = []
    //执行人默认回显
    option.value.forEach(item => {
        checkExe.value.forEach(val => {
            if (item.empId == val) {
                data.push(item)
            }
        })
    })
    console.log(data, 'data1231')
    userStore.setUserExecutor(data)
    router.push({
        name: 'taskAdd',
    })
}

onMounted(() => {
    // checkExeRefs.value = [];
    // checkGopRefs.value = [];
    getExecutor()
    getGroupPeople()
})
</script>

<style scoped lang="scss">
.title-top-box {
    width: 100%;
    background-color: #F4F9FD;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    img {
        width: 2rem;
        height: 2rem;

    }

    h2 {
        margin-left: 6rem;
        font-size: 1.5rem;
    }
}

img {
    width: 2rem;
    height: 2rem;
}

.tab-box {
    height: 10rem;
    margin-top: 1rem;

    .van-search {
        margin-top: 1rem;
        background-color: #F4F9FD;
        border-radius: 1rem;
        border: 1px solid #999999;
    }

    .table-item {
        height: 31rem;
        margin-top: 1rem;
        overflow: auto !important;
    }
}

:deep(.van-cell) {
    background-color: #F4F9FD;

    span {
        margin-right: 3rem;
        font-size: 1rem;
        font-weight: lighter;
    }

    .van-cell__title {
        font-size: 1.1rem;
        font-weight: lighter;
    }
}

:deep(.van-tabs__nav) {
    background-color: #F4F9FD;
    margin-left: 1rem;

    .van-tab__text {
        font-size: 1.3rem;
        font-weight: lighter;
    }
}

.btn-box {
    position: fixed;
    padding: 0 1.5rem;
    margin-top: 1rem;
    width: 100%;
    bottom: 3%;
    right: 1%;


    .van-button {
        border-radius: 0.9rem;

        width: 100%;
    }
}

.bg-box {
    position: fixed;
    top: 25%;
    left: 15%;
}
</style>